import React, { Component } from 'react'
import GuitarPage from './GuitarPage';
import { connect } from 'react-redux';
import PianoPage from './PianoPage';
import BassPage from './BassPage';
import MetronomePage from './MetronomePage';
import MusicNamePage from './MusicNamePage';
import IntervalPage from './IntervalPage';
import ChordPage from './ChordPage';
import ScalePage from './ScalePage';
import FifthsCirclePage from './FifthsCirclePage/idnex';
import MusicTooles from './MusicTooles/index';
import MusicalTermsPage from './MusicalTermsPage';


class Middlweare extends Component {
    render() {
        const ToolesName = this.props.ToolesName
        if (ToolesName === '在线工具') return (<MusicTooles ToolesName={ToolesName} />)
        if (ToolesName === '吉他') return (<GuitarPage ToolesName={ToolesName} />)
        if (ToolesName === '钢琴') return (<PianoPage ToolesName={ToolesName} />)
        if (ToolesName === '贝斯') return (<BassPage ToolesName={ToolesName} />)
        if (ToolesName === '节拍器') return (<MetronomePage ToolesName={ToolesName} />)
        if (ToolesName === '音名对照表') return (<MusicNamePage ToolesName={ToolesName} />)
        if (ToolesName === '音程查找索引') return (<IntervalPage ToolesName={ToolesName} />)
        if (ToolesName === '和弦查找索引') return (<ChordPage ToolesName={ToolesName} />)
        if (ToolesName === '音阶查找索引') return (<ScalePage ToolesName={ToolesName} />)
        if (ToolesName === '五度圈') return (<FifthsCirclePage ToolesName={ToolesName} />)
        if (ToolesName === '音乐术语') return (<MusicalTermsPage ToolesName={ToolesName} />)
        return (
            <MusicTooles ToolesName={ToolesName} />
        )
    }
}
const mapStateToProps = (state) => ({ ToolesName: state.onlineToolesReducer.name })
export default connect(mapStateToProps)(Middlweare)
